<template>
  <div>
    <el-table :data="datas.records" border stripe>
      <el-table-column 
      label="序号"
      type="index"
      width="80"
      align="center"
      >
      </el-table-column>
      <el-table-column 
      width="350"
      prop="skuName"
      label="名称"
      >
      </el-table-column>
      <el-table-column 
      width="120"
      label="默认图片"
      >
      <template slot-scope="{row,$index}">
        <img :src="row.skuDefaultImg" style="width:100px;height:100px">
      </template>
      </el-table-column>
      <el-table-column 
      label="重量(KG)"
      width="300"
      prop="weight"
      >
      </el-table-column>
      <el-table-column 
      label="价格(元)"
      width="80"
      prop="price"
      >
      </el-table-column>
      <el-table-column 
      label="操作"
      >
      <template slot-scope="{row,$index}">
        <HintButton  title="下架" type="success" icon="el-icon-upload2" size="small" v-if="row.isSale == 1" @click="getSale(row)"></HintButton>
        <HintButton  title="上架" type="info" icon="el-icon-download" size="small" plain v-else-if="row.isSale == 0" @click="getSale(row,1)"></HintButton>
        <HintButton  title="1" type="danger" icon="el-icon-edit" size="small"  @click="$message.info('正在开发中')"></HintButton>
        <HintButton  title="2" type="info" icon="el-icon-info" size="small" @click="getRightData(row)"></HintButton>
        <HintButton  title="3" type="primary" icon="el-icon-delete" size="small"></HintButton>
      </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[7, 9, 6, 5]"
      :current-page="current"
      :page-size="size"
      :page-count='pages'
      layout="prev, pager, next,->,sizes"
      :total="total"
      style="text-align:center"
      @current-change='getListData'
      @size-change="handleSizeChange"
      >
    </el-pagination>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      style="padding-left:30px"
      :show-close='false'
      size='50%'
      >
    <div class="demo-drawer__content" style="padding-left:30px">
    <el-form :model="RData" label-position='right'>
      <el-form-item label="名称" label-width='100px' class="item" >
        <span>
          {{RData.skuName}}
        </span>
      </el-form-item>
      <el-form-item label="描述" label-width='100px' class="item">
          {{RData.skuDesc}}
      </el-form-item>
      <el-form-item label="价格" label-width='100px' class="item">
          {{RData.price}}
      </el-form-item>
      <el-form-item label="平台属性" label-width='100px' class="item">
        <el-tag type="danger" size="normal" v-for="data,idnex in RData.skuSaleAttrValueList" :key="index" style="margin-right:10px">
          {{data.saleAttrValueName}}
        </el-tag>
      </el-form-item>
      <el-form-item label="商品图片" label-width='100px' class="item">
            <el-carousel :interval="3000" height="350px">
            <el-carousel-item v-for="item in RData.skuImageList" :key="item.id">
            <img :src="item.imgUrl" style="width:100%;height:100%">
            </el-carousel-item>
            </el-carousel>
      </el-form-item>
    </el-form>
    <!-- <div class="demo-drawer__footer">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div> -->
  </div>
</el-drawer>
  </div>
</template>

<script>
export default {
    name:'Sku',
    data(){
      return{
        demo:true,
        datas:{},
        current:1,
        pages:0,
        total:0,
        size:7,
        RData:{},
        drawer:false,
        direction:'rtl'
      }
    },
    methods:{
      handleClose(done){
        done()
      },
      async getListData(page=this.current,tatal=this.size){
        const result = await this.$API.sku.reqListData(page,tatal)
        if(result.code == 200){
          let {pages,total,current,size} = result.data
          this.datas = result.data
          this.current = current
          this.pages = pages
          this.total = total
          this.size = size
        }
      },
      handleSizeChange(total){
        this.getListData(undefined,total)
      },
      async getSale(row,on){
        const result = await this.$API.sku.reqOnSale(row.id,on)
        if(result.code == 200){
          this.getListData()
        }
      },
      async getRightData({id}){
        let result = await this.$API.sku.reqRightViewData(id)
          if(result.code == 200){
            console.log(result.data)
            this.RData = result.data
            this.drawer = true
          }
      }
    },
    mounted(){
      this.getListData(1,7)
    }
}
</script>

<style>
.item .el-form-item__label{
    font-size: 18px;
    font-weight: 700;
}

.el-carousel__button{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red;

}
</style>